@page "/scheduler/events"

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Schedule
@inherits SampleBaseComponent;

<SampleDescription>
    <p>
        This demo illustrates the event handler that triggers on respective Scheduler actions and the same is being displayed
        on the event trace panel.
    </p>
</SampleDescription>
<ActionDescription>
    <p>
        In this demo, the event handler that triggers based on the action taking place in Scheduler has been demonstrated. The
        user can use these events, if at some point they need to perform some custom actions or any needed additional
        customizations on the available Scheduler features.
    </p>
</ActionDescription>

<div class="col-lg-9 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">
            <ScheduleEvents TValue="ScheduleData.AppointmentData" Created="OnCreate" OnActionBegin="OnActionBegin" ActionCompleted="OnActionComplete" OnActionFailure="OnActionFailure"
                            OnCellDoubleClick="OnCellDoubleClick" OnCellClick="OnCellClick" Navigating="OnNavigating" Destroyed="OnDestroyed" OnEventClick="OnEventClick" OnEventDoubleClick="OnEventDoubleClick"
                            OnPopupOpen="OnPopupOpen" OnPopupClose="OnPopupClose" OnDragStart="OnDragStart" OnResizeStart="OnResizeStart" Dragged="OnDragStop" Resized="OnResizeStop"></ScheduleEvents>
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
            <ScheduleViews>
                <ScheduleView Option="View.Day"></ScheduleView>
                <ScheduleView Option="View.Week"></ScheduleView>
                <ScheduleView Option="View.WorkWeek"></ScheduleView>
                <ScheduleView Option="View.Month"></ScheduleView>
                <ScheduleView Option="View.Agenda"></ScheduleView>
            </ScheduleViews>
        </SfSchedule>
    </div>
</div>
<div class="col-lg-3 property-section">
    <br>
    <div class="property-panel-section">
        <div class="property-panel-header">Event Trace</div>
        <div class="property-panel-content">
            <table id="property" style="width:100%" title="Event Trace">
                <tbody>
                    <tr>
                        <td>
                            <div style="height: 245px; overflow: auto; padding: 10px 0 0 10px;">
                                <div class="eventlog" style="word-break: normal;">
                                    @foreach (string eventName in EventLog)
                                    {
                                        <span>Schedule <b>@eventName</b> event called</span><hr>
                                    }
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="padding: 10px">
                                <SfButton Content="Clear" OnClick="@ClearButtonClick"></SfButton>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    .eventlog b {
        color: #388e3c;
    }

    hr {
        margin: 1px 10px 1px 0px;
        border-top: 1px solid #eee;
    }
</style>
@code{
    public DateTime CurrentDate = new DateTime(2020, 1, 9);
    public List<ScheduleData.AppointmentData> DataSource = new ScheduleData().GetScheduleData();
    public List<string> EventLog { get; set; } = new List<string>();

    public void ClearButtonClick()
    {
        EventLog.Clear();
    }

    public void OnCreate() { EventLog.Insert(0, "Load"); }

    public void OnActionBegin() { EventLog.Insert(0, "Action Begin"); }

    public void OnActionComplete() { EventLog.Insert(0, "Action Complete"); }

    public void OnActionFailure() { EventLog.Insert(0, "Action Failure"); }

    public void OnCellDoubleClick() { EventLog.Insert(0, "Cell Double Click"); }

    public void OnCellClick() { EventLog.Insert(0, "Cell Click"); }

    public void OnNavigating() { EventLog.Insert(0, "Navigating"); }

    public void OnDestroyed() { EventLog.Insert(0, "Destroyed"); }

    public void OnEventClick() { EventLog.Insert(0, "Event Click"); }

    public void OnEventDoubleClick() { EventLog.Insert(0, "Event Double Click"); }

    public void OnPopupOpen() { EventLog.Insert(0, "Popup Open"); }

    public void OnPopupClose() { EventLog.Insert(0, "Popup Close"); }

    public void OnDragStart() { EventLog.Insert(0, "Drag Start"); }

    public void OnResizeStart() { EventLog.Insert(0, "Resize Start"); }

    public void OnDragStop() { EventLog.Insert(0, "Drag Stop"); }

    public void OnResizeStop() { EventLog.Insert(0, "Resize Stop"); }
}